<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="kfzjw008">
    
    <meta name="description" content="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">
    
    
    
    
    
    
    <title>【WEB】web开发基础知识整理（1） | 几何军工作室</title>
    <!-- inject:style -->
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <!-- endinject -->
    <style>
        .cube-loading {
            top: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            background: url('/images/lg/loading.gif') no-repeat center center;
            background-color: rgba(0,0,0,.7);
        }

        .cube-loading.out {
            display: none;
        }

        .cube-loading:before {
            display: block;
            content: '加载中';
            position: relative;
            width: 100%;
            top: 50%;
            right: -50%;
            color: #fff;
        }

        @media(max-width: 768px) {
            .cube-loading:before {
                font-size: 1.2em;
                transform: translate(-24px,20px);
                -webkit-transform: translate(-24px,20px);
                -o-transform: translate(-24px,20px);
                -ms-transform: translate(-24px,20px);
            }
        }

        @media(min-width: 768px) {
            .cube-loading:before {

            }
        }
    </style>
    
</head>
<body>
<div class="cube-body">
    <nav id="cube-top-memu" class="cube-menu">
    <ul class="cube-menu-collapse">
        
        <li>
            <i class="cube-icon cube-icon-home" aria-hidden="true"></i>
            <a href="/">首页</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-categories" aria-hidden="true"></i>
            <a href="/categories">分类</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-tags" aria-hidden="true"></i>
            <a href="/project">工程项目</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/competition">学科竞赛</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/zone">原创空间</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-about" aria-hidden="true"></i>
            <a href="/about-me">关于我</a>
        </li>
        
    </ul>
</nav>
<nav class="cube-side-menu" id="cube-side-menu">
    <ul class="cube-menu-list">
        
        <li>
            <a class="lrc-control">开启歌词</a>
        </li>
        
        <li>
            <a class="scroll-to-top">回到顶部</a>
        </li>
    </ul>
</nav>
    <header class="cube-header" id="cube-header">
    <img src=" http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg " alt="头部背景图片">
    
    <div class="cube-type">
        <span class="cube-typed-title">几何军工作室</span>
        <span class="cube-typed-cursor">|</span>
    </div>
    
</header>

    <style>
        nav.cube-menu:before {
            content: '';
            visibility: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 44px;
        
            filter: blur(5px);
            -webkit-filter: blur(5px);
        
            z-index: -1;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-repeat: no-repeat;
            background-position: center -356px;
            background-size: cover;
            background-color: transparent;
        }

        header.cube-background.cube-header-background {
            visibility: hidden;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-position: center -400px;
        }
    </style>
    <header class="cube-background cube-header-background">
        
        <div class="cube-type">
            <span class="cube-typed-title">几何军工作室</span>
            <span class="cube-typed-cursor">|</span>
        </div>
        
    </header>
    <div class="load-header-background"></div>
    <script>
        (function (window) {

            window.headerModule = {}
            window.headerModule.image = {
                width: '2000',
                height: '850'
            }

        })(window)
    </script>
    
    <div class="cube-content">
        <div class="cube-left">
            <div class="cube-article">
    <h1 class="title">【WEB】web开发基础知识整理（1）</h1>
    
    <div class="cube-article-header">
        <div class="cube-article-date">
            <i class="cube-icon cube-icon-date" aria-hidden="true"></i>
            <!-- moment.js对象 -->
            2018-11-05
            <span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
                   
</span>
        </div>
        <div class="cube-article-tags">
    <i class="cube-icon cube-icon-tag" aria-hidden="true"></i>
    
    <a href="/tags/期末复习/">#期末复习</a>
    
    <a href="/tags/HTML/">#HTML</a>
    
    <a href="/tags/CSS/">#CSS</a>
    
    <a href="/tags/前端/">#前端</a>
    
</div>
    </div>
    
    
    <div class="cube-article-content cube-markdown">
        
        <h1 id="WEB开发技术基础知识整理（1）"><a href="#WEB开发技术基础知识整理（1）" class="headerlink" title="WEB开发技术基础知识整理（1）"></a>WEB开发技术基础知识整理（1）</h1><h2 id="第一部分——HTML"><a href="#第一部分——HTML" class="headerlink" title="第一部分——HTML"></a>第一部分——HTML</h2><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><ul>
<li>全称超文本标记语言，有一系列标签组成，文档包含标签以及文本内容。</li>
<li>允许嵌入图像，对象，表单，结构化信息；允许引入css，js影响网页。</li>
<li>网页由浏览器读取html并选安诚可视化界面。<a id="more"></a>
<h3 id="重点知识"><a href="#重点知识" class="headerlink" title="重点知识"></a>重点知识</h3></li>
<li>HTML的作用</li>
<li>HTML基本编写规范</li>
<li>常用基本元素标签及属性</li>
<li>Inline、block级元素的特点</li>
<li>无序/有序列表的声明定义方法</li>
<li>Form表单下的基本标签，及标签的常用属性</li>
</ul>
<h3 id="一般格式"><a href="#一般格式" class="headerlink" title="一般格式"></a>一般格式</h3><ul>
<li>H5一般声明为&lt;！DOCTYPE html&gt;</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">！DOCTYPE</span> <span class="attr">html</span>&gt;</span><span class="comment">&lt;!--   声明文档为h5         --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span><span class="comment">&lt;!--       描述文档     --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span><span class="comment">&lt;!--            --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span><span class="comment">&lt;!--   声明字符集元数据         --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span><span class="comment">&lt;!--  声明文档标题          --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">html<span class="comment">&lt;!--     描述可视化内容       --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span><span class="comment">&lt;!--            --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>所有文档必须先声明文档类型，统一编码格式</strong></li>
<li>标签格式：<blockquote>
<blockquote>
<p>&lt;标签名称&gt; &lt;/标签名称&gt;</p>
</blockquote>
</blockquote>
</li>
</ul>
<h3 id="元素与空元素"><a href="#元素与空元素" class="headerlink" title="元素与空元素"></a>元素与空元素</h3><ul>
<li>元素：从开始标签至结束标签，包括开始标签中声明的属性，以及标签之间内容的，全部部分</li>
<li>&#60;br/&#62; ——换行</li>
<li>&#60;hr/&#62; ——分割线</li>
<li>没有描述内容的元素统一称作空元素</li>
</ul>
<p>###属性</p>
<ul>
<li>html元素提供的附加信息，声明于开始标签。</li>
<li>键值对形式出现：name=“value”</li>
<li>不区分大小写</li>
<li>示例<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">title</span>=<span class="string">“what?!”</span>&gt;</span> <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h3><ul>
<li>自动在前后添加空行 <h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--这是  注释 --&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="段落"><a href="#段落" class="headerlink" title="段落"></a>段落</h3><ul>
<li>自动在段落前后添加空行</li>
<li>br换行</li>
<li>忽略多余空格和换行</li>
<li>pre元素保留换行和空格</li>
</ul>
<h3 id="制表符"><a href="#制表符" class="headerlink" title="制表符"></a>制表符</h3><p>&amp;nbsp 空格<br>&amp;lt &amp;gt &lt;&gt;</p>
<h3 id="链接"><a href="#链接" class="headerlink" title="链接"></a>链接</h3><h4 id="普通链接"><a href="#普通链接" class="headerlink" title="普通链接"></a>普通链接</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"www.baodi.com"</span> &gt;</span>12345<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="图片链接："><a href="#图片链接：" class="headerlink" title="图片链接："></a>图片链接：</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"www.baodi.com"</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.gif"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="书签用法"><a href="#书签用法" class="headerlink" title="书签用法"></a>书签用法</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">"1"</span> <span class="attr">href</span>=<span class="string">"www.baodi.com"</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.gif"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span>  <span class="attr">href</span>=<span class="string">"#1"</span> &gt;</span>111<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>允许在不同界面</li>
<li><h3 id="绝对路径和相对路径"><a href="#绝对路径和相对路径" class="headerlink" title="绝对路径和相对路径"></a>绝对路径和相对路径</h3></li>
<li>绝对路径从协议开始。</li>
<li>相对路径不包含协议。</li>
<li>../返回上一层目录。</li>
<li>默认为服务器根目录而非网站根目录，通过base属性声明全局相对目录。<h3 id="input元素"><a href="#input元素" class="headerlink" title="input元素"></a>input元素</h3></li>
<li>默认为text</li>
<li>password为密码</li>
<li>checkbox为多选</li>
<li>radio为单选，用name分组，checked表示选中</li>
<li>file表示上传文件，accept可以指定属性</li>
<li>button无提交功能的按钮</li>
<li>hidden 源码可见</li>
<li>date输入日期</li>
<li>datetime-local日期和时间</li>
<li>number ，具有min，max，step属性</li>
<li>textera 多行输入<h3 id="label"><a href="#label" class="headerlink" title="label"></a>label</h3></li>
<li>label元素不会呈现任何特殊效果，它为鼠标用户改进了可用性</li>
<li>点击label 元素文本，浏览器会将焦点转到和标签相关的表单元素上。for 属性指定关联元素id属性值，实现联动操作</li>
<li>for属性联动checkbox<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3></li>
<li>th，tr，td</li>
<li>先排满行，再排列</li>
<li>th直接替换td就行</li>
<li>tr包含td<h3 id="块级元素和内联元素"><a href="#块级元素和内联元素" class="headerlink" title="块级元素和内联元素"></a>块级元素和内联元素</h3></li>
<li>块级元素，始终在新行开始，尽可能的向左向右占用全部可用宽度，div,h1,p,form,table等</li>
<li>div，块级元素，元素本身无特殊意义，与CSS同时使用，用于对大的内容块设置样式属性，通过定义多div，布局整个文档结构，其他HTML元素的容器</li>
<li>内联元素，不以新行开始，只占用所需宽度。span,a,img等。</li>
<li>span元素，内联元素，元素本身无特殊意义，与 CSS 同时使用，用于为部分文本设置样式属性，用作文本的容器。<h3 id="button"><a href="#button" class="headerlink" title="button"></a>button</h3></li>
<li>分为button，submit，reset三种type<h3 id="head"><a href="#head" class="headerlink" title="head"></a>head</h3></li>
<li><p>meta为元数据，元数据会被浏览器解析，通常用于指定网页的字符集、描述、关键词，作者等。</p>
<h3 id="属性和标签大全"><a href="#属性和标签大全" class="headerlink" title="属性和标签大全"></a>属性和标签大全</h3></li>
<li><p>p 段落</p>
<ul>
<li>属性： title——工具条提示</li>
</ul>
</li>
<li><p>img 图片</p>
<ul>
<li>属性：alt无法显示的时候显示文本替代</li>
<li>style<ul>
<li>width</li>
<li>height</li>
</ul>
</li>
</ul>
</li>
<li><p>h1-h6 标题（由大到小）</p>
</li>
<li>a 链接</li>
<li>table表格<ul>
<li>tr行</li>
<li>th标题</li>
<li>td列</li>
<li>border属性定义表格的边宽</li>
<li>colspan定义跨列数</li>
<li>rowspan定义跨行数</li>
</ul>
</li>
<li>ul 无序列表 <ul>
<li>style=“list-style-type：（disc，circle，square，none）”  </li>
</ul>
</li>
<li>ol有序列表（1，A，a，I，i）</li>
<li>dl自定义说明列表<ul>
<li>dd注释</li>
<li>dt内容</li>
</ul>
</li>
<li>pre预格式文本，保留换行和空格</li>
<li>fieldset划实线框</li>
<li>legend表示框名</li>
<li>select下拉菜单，option表示各个选项，optgroup表示分组，属性selected表示选中</li>
<li>button按钮</li>
<li>datalist预定义列表</li>
<li>form表单<ul>
<li>属性action，enctype，method</li>
</ul>
</li>
<li>文本格式：<ul>
<li>b strong 加粗</li>
<li>em i 倾斜</li>
<li>small 小号</li>
<li>mark 标记</li>
<li>del 删除线</li>
<li>ins 下划线</li>
<li>sub 上标</li>
<li>sup 下标</li>
<li>abbr 缩写定义</li>
<li>address 地址</li>
<li>bdo 文字方向</li>
<li>blockquote 长引用</li>
<li>q 短引用</li>
<li>cite 引证</li>
<li>kbd键盘输入</li>
<li>samp 程序系统输出</li>
<li>code 代码</li>
<li>var 变量</li>
</ul>
</li>
</ul>
<p>常见属性：</p>
<ul>
<li>readonly只读</li>
<li>placeholder输入提示</li>
<li>disabled不可操作</li>
<li>required 必须填写</li>
<li>Data-*属性，自定义数据属性，允许在所有HTML元素中嵌入自定义的数据属性，用于将数据存储在页面，可在JS中使用这些数据，从而创建出更具吸引力的用户体验</li>
<li>input hidden类型：可将值传递到服务器</li>
<li>Data-*属性：值仅存储在前端，为JS提供服务</li>
</ul>

    </div>
</div>

<div class="cube-article-nav">
    <ul>
        
        <li class="prev">
            <a href="/2018/11/05/web2/">
                <i class="cube-icon cube-prev" aria-hidden="true"></i>
                【WEB】web开发基础知识整理（2）
            </a>
        </li>
        
        
        <li class="next">
            <a href="/2018/11/04/test/">
                热烈庆祝博客搭建一期工程基本完成
                <i class="cube-icon cube-next" aria-hidden="true"></i>
            </a>
        </li>
        
    </ul>
</div>


<!-- TODO 根据theme.comment的内容进行入口选择 -->


<!-- Table of Contents -->

        </div>
        <div class="cube-right">
            

<div class="cube-search cube-sidebar" id="cube-search">
    <div class="search-container">
        <input type="text" placeholder="搜索" class="cube-search-input" id="cube-search-input">
        <i class="cube-icon cube-icon-search cube-search-submit" aria-hidden="true"></i>
    </div>
    <!-- TODO 通过给window赋一个全局变量，通过脚本赋值 -->
</div>
<script>
    (function (window) {
        'use strict';
        window.searchModule = {}
        window.searchModule.JSONUrl = '/content.json'
        window.searchModule.rootUrl = '/'
    })(window)
</script>
<div class="cube-search-form">
    <div class="cube-search-control">
        <input type="text" placeholder="搜索" class="search-input">
        <a class="close-button">
            <i class="cube-icon cube-close" aria-hidden="true"></i>
        </a>
    </div>
    <div class="cube-search-result"></div>
</div>


<div class="cube-author cube-sidebar" id="cube-author">
    
    
    <span>kfzjw008</span>
    
    
    <a title="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备</a>
    
    <div class="count">
        <a class="count articles"><span>25</span>文章</a>
        <a class="count tags"><span>22</span>标签</a>
        <a class="count categories"><span>7</span>分类</a>
    </div>
</div>



<div class="cube-music cube-sidebar" id="cube-music">
    <div class="cube-player aplayer" id="cube-player"></div>
</div>
<script>
    (function (window) {
        window.musicModule = {}
        window.musicModule.musicConfig = '{"narrow":false,"autoplay":true,"showlrc":3,"theme":"#b7daff","mutex":true,"mode":"circulation","preload":"auto","listmaxheight":"513px","music":[{"title":"光明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%85%89%e6%98%8e-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"不羁的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%b8%8d%e7%be%81%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"上千个黎明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0-%e4%b8%8a%e5%8d%83%e4%b8%aa%e9%bb%8e%e6%98%8e.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"信仰在空中飘扬","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%bf%a1%e4%bb%b0%e5%9c%a8%e7%a9%ba%e4%b8%ad%e9%a3%98%e6%89%ac-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"像梦一样自由","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%83%8f%e6%a2%a6%e4%b8%80%e6%a0%b7%e8%87%aa%e7%94%b1-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"怒放的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%80%92%e6%94%be%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"大桥上","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0%20-%20%e5%a4%a7%e6%a1%a5%e4%b8%8a.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"流年啊，你奈我何","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b5%81%e5%b9%b4%e5%95%8a%20%e4%bd%a0%e5%a5%88%e6%88%91%e4%bd%95-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"生来彷徨","author":"汪峰","url":"http://47.95.213.193/mp3data/%e7%94%9f%e6%9d%a5%e5%bd%b7%e5%be%a8-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"}]}'
        window.musicModule.lrcConfig = {
            open: '开启歌词',
            close: '关闭歌词'
        }
    })(window)
</script>



<div class="cube-recent-posts cube-sidebar" id="cube-recent-posts">
    <div class="title">
        <a>近期文章</a>
    </div>
    <ul class="list">
        
        
        <li>
            <!-- TODO 如果文章要显示图片，那么在front-matter上添加preview属性(url or path) -->
            
            <div class="normal">
                <p class="index first">
                    <span>1</span>
                </p>
                <p class="title">
                    <a href="/2019/03/27/2038/" title="JAVA学习笔记(2)-spring MVC">JAVA学习笔记(2)-spring MVC</a>
                </p>
            </div>
            
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>2</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2036/" title="JAVA学习笔记">JAVA学习笔记</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>3</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2037/" title="设计模式学习笔记-01">设计模式学习笔记-01</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>4</span>
                </p>
                <p class="title">
                    <a href="/2019/03/23/2035/" title="蓝桥杯比赛前夜-知识总结">蓝桥杯比赛前夜-知识总结</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>5</span>
                </p>
                <p class="title">
                    <a href="/2019/03/21/2034/" title="建立友好合作博客的方式">建立友好合作博客的方式</a>
                </p>
            </div>
        </li>
        
        
    </ul>
</div>



<div class="cube-categories cube-sidebar" id="cube-categories">
    <div class="title">
        <a href="/categories">分类</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/categories/WEB开发/">#WEB开发</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/博客公告/">#博客公告</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/JAVA/">#JAVA</a>
        </div>
        
    </div>
</div>



<div class="cube-tagcloud cube-sidebar" id="cube-tagcloud">
    <div class="title">
        <a href="/tags">标签云</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/tags/servlet/">#servlet</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/期末复习/">#期末复习</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/HTML/">#HTML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/CSS/">#CSS</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/前端/">#前端</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/算法/">#算法</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/随笔/">#随笔</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/jQuery/">#jQuery</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/JavaScript/">#JavaScript</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/WEB-Service/">#WEB Service</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/题解/">#题解</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/MYSQL/">#MYSQL</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/BLOG/">#BLOG</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/HEXO/">#HEXO</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/JAVA/">#JAVA</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/UML/">#UML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/软件体系结构/">#软件体系结构</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/Spring-MVC/">#Spring MVC</a>
        </div>
        
    </div>
</div>



<div class="cube-links cube-sidebar" id="cube-links">
    <div class="title">
        <a>个人链接</a>
    </div>
    <ul class="list">
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/GitHub.png">
            
            <a href="https://github.com/kfzjw008" target="_blank">我的GitHub</a>
        </li>
        
        <li>
            
            
            <img src="https://www.csdn.net/company/img/csdn-logo.svg">
            
            <a href="https://blog.csdn.net/kfzjw008" target="_blank">我的CSDN</a>
        </li>
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/SF.png">
            
            <a href="https://47.95.213.193" target="_blank">我的个人主页</a>
        </li>
        
        <li>
            
            
            <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=fc01334b798b4710ce2ffacafbf5a4c0/1b4c510fd9f9d72a26f9db77df2a2834349bbb3f.jpg">
            
            <a href="https://www.zhihu.com/people/zhang-jun-wei-81-7/activities" target="_blank">我的知乎主页</a>
        </li>
        
    </ul>
</div>



<div class="cube-friend-links cube-sidebar" id="cube-friend-links">
    <div class="title">
        <a>友情链接</a>
    </div>
    <ul class="list">
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="http://cube-1252774894.cosgz.myqcloud.com/friend_links/micblo.png">
            <a href="https://github.com/MajorBill-Liu" target="_blank">MajorBill-Liu 的github</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
    </ul>
</div>


        </div>
    </div>
</div>
<footer class="cube-footer">
    
© 2017 kfzjw008

<br>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>


</footer>
<!-- inject:script -->
<script src="/js/script.js"></script>
<!-- endinject -->
<div class="cube-loading out"></div>
</body>
</html>